<template>
  <div>
    <!-- 搜索 -->
    <el-input style="width:400px" placeholder="请输入姓名" @change="inputChange" v-model="input" size="medium" clearable> </el-input>
    <el-button type="primary" style="margin-left:20px" @click="search">搜索</el-button>    
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      border
    >
      <el-table-column prop="id" label="id" width="180"> </el-table-column>
      <el-table-column prop="nickName" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="className" label="班级"> </el-table-column>
      <el-table-column prop="phonenumber" label="手机号"> </el-table-column>
      <el-table-column prop="createTime" label="创建日期" width="180">
        <template slot-scope="{ row, $index }">
          <el-button type="danger" size="medium" @click="delete1(row.id)"
            >删除</el-button
          >
          <el-button type="info" size="medium" @click="updata(row.id)"
            >修改</el-button
          >
          <!-- {{row}} -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="pagination">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {reqgetAllUser} from "@/api";
export default {
  data() {
    return {
      tableData: [

      ],
      pageNum: 1,
      pageSize:6,
      total:1,
      input:""
    };
  },
  created() {
    this.getUserTable();
  },
  methods: {
    async getUserTable(){
      let result=await reqgetAllUser(this.pageNum,this.pageSize);
      // console.log(result);
      this.tableData=result.rows;
      this.total=Number(result.total);

    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    // 删除
    delete1(id) {
      console.log("删除", id);
      this.$message({
        showClose: true,
        message: "删除",
        type: "error",
      });
    },
    //修改信息
    updata(id) {
      console.log("修改", id);
      this.$message({
        showClose: true,
        message: "修改",
        type: "warning",
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //输入框失去焦点时触发的事件，参数为输入的值
    inputChange() {
      this.$emit("inputChange", this.input);
    },
    //搜索按钮点击事件
    search() {
      this.$message({
        message: "搜索",
      });
    },
  },

};
</script>
<style scoped>
.pagination{
width: 100%;
display: flex;
justify-content: center;
margin-top: 30px;
}
</style>
